<template>
	<div class="box">
		<div class="header1">
			<h5><i class="el-icon-d-caret"></i>数字化系统管理指标</h5>
			<div class="header-cont">
				<div class="head1">
					<div class="head1-left">
						<img src="../../assets/two1.png" />
					</div>
					<div class="head1-right">
						<div class="head1-right-top">
							<span>培训</span>本年<br />
							<span class="num">5</span>次
						</div>
						<div class="head1-right-bottom">
							企业<span>1</span>次/上月
						</div>
					</div>
				</div>
				<div class="head1">
					<div class="head1-left b">
						<img src="../../assets/two2.png" />
					</div>
					<div class="head1-right bb">
						<div class="head1-right-top">
							<span>培训人数</span>本年<br />
							<span class="num">674</span>人
						</div>
						<div class="head1-right-bottom">
							企业<span>12</span>人/上月
						</div>
					</div>
				</div>
				<div class="head1">
					<div class="head1-left c">
						<img src="../../assets/two3.png" />
					</div>
					<div class="head1-right cc">
						<div class="head1-right-top">
							<span>培训人数</span>本年<br />
							<span class="num">674</span>人
						</div>
						<div class="head1-right-bottom">
							企业<span>12</span>人/上月
						</div>
					</div>
				</div>
				<div class="head1">
					<div class="head1-left d">
						<img src="../../assets/two4.png" />
					</div>
					<div class="head1-right dd">
						<div class="head1-right-top">
							<span>培训人数</span>本年<br />
							<span class="num">47</span>人
						</div>
						<div class="head1-right-bottom">
							企业<span>12</span>人/上月
						</div>
					</div>
				</div>
				<div class="head1">
					<div class="head1-left e">
						<img src="../../assets/two5.png" />
					</div>
					<div class="head1-right ee">
						<div class="head1-right-top">
							<span>培训人数</span>本年<br />
							<span class="num">28006</span>人
						</div>
						<div class="head1-right-bottom">
							企业<span>12</span>人/上月
						</div>
					</div>
				</div>
				<div class="head1">
					<div class="head1-left f">
						<img src="../../assets/two6.png" />
					</div>
					<div class="head1-right ff">
						<div class="head1-right-top">
							<span>培训人数</span>本年<br />
							<span class="num">2</span>人
						</div>
						<div class="head1-right-bottom">
							企业<span>12</span>人/上月
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="second">
			<div class="second-left">
				<h5><i class="el-icon-d-caret"></i>安全生产投入月报</h5>
				<div class="second-left-box">
					<div id="echart" style="width: 100%;height: 280px;"></div>
				</div>
			</div>
			<div class=" second-right">
				<h5><i class="el-icon-d-caret"></i>安全教育</h5>
				<div class="second-right-box">
					<img src="../../assets/img.png" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	var echarts = require("echarts")
	export default {
		mounted() {
			var ele = document.getElementById('echart');
			var myChart = echarts.init(ele);
			myChart.setOption({
				legend: {
					data: ['生产投入'],
					textStyle: { // 图列内容样式
						color: '#000', // 字体颜色
					},
					orient: "horizontal",
					x: 'center',
					y: ' center',
					width: '100',
					padding: [20, 30, 0, 0],
				},
				xAxis: {
					data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
					axisTick: { // 是否显示刻度
						show: false,
					},
					axisLine: { // 轴线的设置，eg：轴的颜色
						lineStyle: {
							color: '#D9D9D9',
						}
					},
					axisLabel: { // 轴文字的设置
						color: "#4F6472",
						fontSize: 12,
					},
					splitLine: {
						show: true,
						lineStyle: {
							type: "solid",
							color: '#F6F6F6',
						}
					},
				},
				yAxis: {
					type: 'value',
					axisTick: { // 是否显示刻度
						show: false,
					},
					axisLine: { // 轴线的设置，eg：轴的颜色
						lineStyle: {
							color: '#D9D9D9',
						}
					},
					axisLabel: { // 轴文字的设置
						color: "#4F6472",
						fontSize: 12,
					},
					splitLine: {
						show: true,
						lineStyle: {
							type: "solid",
							color: '#F6F6F6',
						}
					},
				},
				series: [{
					name: "生产投入",
					data: [9, 15, 1, 0, 0, 22, 0, 0, 0, 0, 0, 0],
					type: 'bar',
					itemStyle: { // 柱子的设置
						normal: {
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 1,
									color: "#0489FF" // 100% 处的颜色
								},
								{
									offset: 0,
									color: "#57B8FF" // 0% 处的颜色
								}
							], false)
						}
					},
				}]
			})
		}
	}
</script>

<style>
	.box{
		padding: 20px;
	}
	.header1 h5 {
		color: black;
	}

	.header-cont {
		display: flex;
		justify-content: space-between;
	}

	.head1 {
		background-image: linear-gradient(#FF4D5B, #FF765B);
		border-radius: 10px;
		display: flex;
		color: #FFD7DA;
	}

	.head1-left {
		flex: 10%;
		background: #FF898D;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
	}

	.head1-left img {
		width: 50px;
		border-radius: 10px;
	}

	.head1-right {
		flex: auto;
		font-size: 12px;
		padding: 18px 10px;
	}

	.head1-right span {
		font-size: 14px;
		color: white;
		margin: 0 6px;
	}

	.head1-right .num {
		font-size: 26px;
	}

	.b {
		background-image: linear-gradient(#8D89FF, #8DA7FE);
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
	}

	.bb {
		background-image: linear-gradient(#5C53FF, #5D86FA);
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.c {
		background-image: linear-gradient(#55B2FF, #88DFFF);
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
	}

	.cc {
		background-image: linear-gradient(#078DFF, #56D2FF);
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.d {
		background-image: linear-gradient(#78A5FD, #A6C4FF);
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
	}

	.dd {
		background-image: linear-gradient(#3B7EFC, #82ABFF);
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.e {
		background-image: linear-gradient(#5EE5EB, #86ECD7);
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
	}

	.ee {
		background-image: linear-gradient(#1CDBE1, #56E5C2);
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.f {
		background-image: linear-gradient(#FFC784, #FFD984);
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
	}

	.ff {
		background-image: linear-gradient(#FFB04F, #FFC94F);
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.second {
		display: flex;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.second-left {
		flex: 61%;
		margin-right: 30px;
	}

	.second-left-box {
		height: 280px;
		background: white;
		border-radius: 10px;
	}

	.second-right {
		flex: auto;
	}

	.second-right-box {
		height: 280px;
		background: white;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.second-right-box img {
		width: 300px;
	}
</style>
